<template>
  <div class="top">
    <i class="el-icon-arrow-left" @click="goBack" style="z-index:20"></i>
    <div class="title">{{name}}</div>
  </div>
</template>

<script>
  export default {
    name: 'top',
    props: {
      name: {
        type: String
      }
    },
    methods: {
      goBack() {
        this.$emit('close');
      }
    },
    beforeDestroy() {
      this.$root.eventHub.$off('address.close');
    }

  }
  ;
</script>

<style scoped>
  .top {
    display: flex;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid #d4d6d9;
  }

  .top i {
    font-size: 20px;
    font-weight: bolder;
    margin-left: 10px;
  }

  .top .title {
    position: absolute;
    display: flex;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    height: 40px;
    line-height: 40px;
  }
</style>
